<template>
	<div class="container">
		<el-form :model="form" ref="form" :rules="rules" hide-required-asterisk label-width="65px">
			<h2>胖虎到家-后台登陆</h2>
			<el-form-item label="账号" prop="username">
				<el-input v-model="form.username" prefix-icon="el-icon-user"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="pwd">
				<el-input v-model="form.pwd" prefix-icon="el-icon-lock" show-password></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="login()">登录</el-button>
				<el-button @click="resetForm()">取消</el-button>
			</el-form-item>

		</el-form>
	</div>
</template>

<script>
	export default {
		data() {

			return {
				form: {
					username: 'admin',
					pwd: 'admin',

				},
				rules: {
					username: [{
							required: true,
							message: '请输入账号',
							trigger: 'blur'
						},
						{
							min: 4,
							max: 12,
							message: '长度在4到12个字符',
							trigger: 'blur'
						}
					],
					pwd: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 4,
							max: 12,
							message: '长度在4到12个字符',
							trigger: 'blur'
						}
					]
				}
			}
		},
		methods: {
			login() {
				this.$refs['form'].validate(valid => {
					if (valid) {
						this.$http.post('http://43.143.190.87:8182/login?username=' + this.form.username +
								'&pwd=' + this.form.pwd)
							.then(res => {
								if (res.data.code == 1) {
									this.$message({
										type: 'success',
										showClose: true,
										message: '登陆成功'
									})
									this.$router.push('/main')
								} else {
									this.$message.error('账号或密码错误！')
								}
							})
							.catch(() => {
								this.$message.error('服务器异常！')
							})

					} else {
						this.$message.error('请输入正确的账号和密码！')
						return false
					}


				})
			},

			resetForm() {
				this.$refs['form'].resetFields()
			}

		}
	}
</script>

<style scoped>
	.container {
		background: url(../assets/login_bg.jpg) no-repeat center;
		height: 100vh;
		overflow: hidden;
		background-size: 100% 100%;
	}

	.el-form {
		width: 450px;
		margin: 150px auto;
		padding: 30px 50px;
		border-radius: 10px;
		box-shadow: 0 8px 16px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		background: rgba(255, 255, 255, 0.8);
	}

	.el-form h2 {
		text-align: center;
	}
</style>